<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="layui/css/layui.css"/>
  <script type="text/javascript" src="layui/layui.js"></script>
  <script type="text/html" id="allocate">
    <div style="float:right">
      <button class="layui-btn layui-btn-sm" lay-event="insert"><i
              class="layui-icon">&#xe654;</i>新增</button>
      <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    </div>
    <div class="layui-inline" style="position: relative;left: 30px;">
        <label class="layui-form-label" style="width: 90px">基金代码</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="fundId" name="fundId" placeholder="基金代码">
        </div>
      </div>
    <div class="layui-inline" style="position: relative;left: 30px;">
     <label class="layui-form-label" style="width: 90px">基金类型</label>
      <div class="layui-input-inline">
        <select name="allocateType" id="fundType" class="layui-input">
          <option value="0"></option>
          <option value="1">开放式</option>
          <option value="2">封闭式</option>
        </select>
      </div>
    </div>
    <div class="layui-inline layui-show-xs-block">
      <button class="layui-btn layui-btn-primary"  lay-submit="" lay-filter="select" lay-event="search"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
    <!--<div class="layui-inline" style="float:right;height:36px;width: 40px" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
-->
  </script>
  <script type="text/javascript">
    layui.use(['table','form','laydate'], function(){
      var table = layui.table;//得到layui 的table组件
      var $=layui.jquery;
      var form=layui.form;
      var laydate = layui.laydate;


      //表格的渲染  给表格加样式 加数据
      table.render({
        //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
        elem: '#MoneyAllocate',
        id: 'MoneyAllocate',
        //url 表格的数据来源  从数据库查询
        url:'selectFund',
        toolbar: '#allocate',
        page: true,
        height:'full-20',
        limits:[5,8,10,15],
        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        cols: [[
          {field:'fundId', title: '基金代码', sort: true}
          ,{field:'fundName', title: '基金名称',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'fundFirstTime', title: '成立日期', sort: true, hide: true}
          ,{field:'fundTrustee', title: '基金管理公司', sort: true}
          ,{field:'fundManager', title: '基金托管银行', sort: true}
          ,{field:'fundType', title: '基金类型',templet:function (item){
              if (item.fundType == 1){
                return '开放式'
              }else if (item.fundType == 2){
                return '封闭式'
            }}
          }
          ,{field:'firstFund', title: '初始净值', sort: true, hide: true}
          ,{field:'fundScale', title: '基金规模', sort: true, hide: true}
          ,{field:'custodianCost', title: '管理人费率', sort: true, hide: true}
          ,{field:'bankCost', title: '托管人费率', sort: true, hide: true}
          ,{field:'fundDay', title: '计提天数', sort: true, hide: true}
          ,{field:'fundBeiZhu', title: '备注', sort: true, hide: true}
          ,{fixed: 'right', width: 165, align:'center', toolbar: '#cashDemo'}
        ]]
      });

      table.on('toolbar(MoneyAllocate)',function (obj) {
        //根据事件对象 来判定点击的是哪一个案例
        if(obj.event=='insert'){
          layer.open({
            type:1,
            area:['1000px','550px'],
            content: $("#MoneyAllocateAdd")
          });
        }else if(obj.event=='search'){
          var fundId=$('#fundId').val();
          var fundType=$('#fundType').val();
          var allocateFlow=$('#allocateFlow').val();
          table.reload('MoneyAllocate', {
            method: 'get',
            url:'selectFund',
            where:{
              'fundId':fundId,
              'fundType':fundType,
              'allocateFlow':allocateFlow
            }
            ,page:{
              curr:1
            }
          });
          laydate.render({
            elem:'#MoneyAllocate'
          });
        }
      });
      //给增加的form绑定提交事件
      form.on('submit(MoneyAllocateForm)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("MoneyAllocateForm");
        $.post(
                'insertFund',
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);
                });

      });

      /*修改*/
      table.on('tool(MoneyAllocate)',function (obj) {
        switch (obj.event) {
          case "edit":
            //得到选中行的数据
            var data = obj.data;
            //JSON.stringify(data)  拼接成JSON格式的字符串
            var userObj = $.parseJSON(JSON.stringify(data));
            //弹出一个修改的窗口
            form.val("moneyAllocateUpdateFrom", userObj);
            layer.open({
              type: 1, //iframe 内嵌窗口
              area: ['1000px', '550px'],
              content: $("#moneyAllocateUpdateContent")
            });

            break;
          case "del":
            var data = obj.data;
            alert("这是删除的操作" + data.fundId);

            $.ajax({
              type: "DELETE",
              url: "deleteFund",
              data: "fundId=" + data.fundId,
              success: function (msg) {
                alert("Data Saved: " + msg);
              }
            });
            window.location.reload();
            break;
        }
      });



      //给修改的form绑定提交事件
      form.on('submit(moneyAllocateUpdateFrom)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("moneyAllocateUpdateFrom");
        $.post(
                "updateFund",
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);

                });
      });
      laydate.render({
        elem: '#allocateDate',
      });
      laydate.render({
        elem: '#test1',
      });
      laydate.render({
        elem: '#test2',
      });
      laydate.render({
        elem: '#test3',
      });
      laydate.render({
        elem: '#test4',
      });
    });
  </script>
</head>
<body>



<table id="MoneyAllocate" lay-filter="MoneyAllocate"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="cashDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i
          class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
          class="layui-icon">&#xe640;</i>删除</a>

</div>
<!--增加-->
<div id="MoneyAllocateAdd"
     style="display: none; height: 100%; width: 950px; text-align: center; ">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用  background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="MoneyAllocateForm" lay-filter="MoneyAllocateForm"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%;margin-left:10%" >
      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">基金代码</label>
        <div class="layui-input-inline">
          <input type="text" name="fundId" lay-verify="required"
                 autocomplete="off" placeholder="基金代码" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金名称</label>
        <div class="layui-input-inline">
          <input type="text" name="fundName" lay-verify="required"
                 autocomplete="off" placeholder="基金名称" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">成立日期</label>
        <div class="layui-input-inline">
          <input type="text" name="fundFirstTime" class="layui-input" id="test1" placeholder="成立日期">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">基金管理公司</label>
        <div class="layui-input-inline">
          <input type="text" name="fundTrustee" lay-verify="required"
                 autocomplete="off" placeholder="基金管理公司" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金类型</label>
          <div class="layui-input-inline">
            <select name="fundType" class="layui-input">
              <option value=""></option>
              <option value="1">开放式</option>
              <option value="2">封闭式</option>
            </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">计提天数</label>
        <div class="layui-input-inline">
          <select name="fundDay" class="layui-input">
            <option value=""></option>
            <option value="1">360</option>
            <option value="2">365</option>
            <option value="2">366</option>
          </select>
        </div>
      </div>

    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金托管银行</label>
        <div class="layui-input-inline">
          <input type="text" name="fundManager" lay-verify="required"
                 autocomplete="off" placeholder="基金托管银行" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">初始净值</label>
        <div class="layui-input-inline">
          <input type="text" name="firstFund" lay-verify="required"
                 autocomplete="off" placeholder="初始净值" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金规模</label>
        <div class="layui-input-inline">
          <input type="text" name="fundScale" lay-verify="required"
                 autocomplete="off" placeholder="基金规模" class="layui-input">
        </div>
      </div>


      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">管理人费率</label>
        <div class="layui-input-inline">
          <input type="text" name="custodianCost" lay-verify="required"
                 autocomplete="off" placeholder="管理人费率" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">总金额</label>
        <div class="layui-input-inline">
          <input type="text" name="totalMoney" lay-verify="required"
                 autocomplete="off" placeholder="总金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">托管人费率</label>
        <div class="layui-input-inline">
          <input type="text" name="bankCost" lay-verify="required"
                 autocomplete="off" placeholder="托管人费率" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
          <input type="text" name="fundBeiZhu" lay-verify="required"
                 autocomplete="off" placeholder="备注" class="layui-input">
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>

<!-- 修改-->

<div id="moneyAllocateUpdateContent" style="display: none; height: 100%; height: 100%; text-align: center;">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用 background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="moneyAllocateUpdateFrom" lay-filter="moneyAllocateUpdateFrom"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">基金代码</label>
        <div class="layui-input-inline">
          <input type="text" name="fundId" lay-verify="required"
                 autocomplete="off" placeholder="基金代码" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金名称</label>
        <div class="layui-input-inline">
          <input type="text" name="fundName" lay-verify="required"
                 autocomplete="off" placeholder="基金名称" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">成立日期</label>
        <div class="layui-input-inline">
          <input type="text" name="fundFirstTime" class="layui-input" id="test2" placeholder="成立日期">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">基金管理公司</label>
        <div class="layui-input-inline">
          <input type="text" name="fundTrustee" lay-verify="required"
                 autocomplete="off" placeholder="基金管理公司" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金类型</label>
        <div class="layui-input-inline">
          <select name="fundType" class="layui-input">
            <option value=""></option>
            <option value="1">开放式</option>
            <option value="2">封闭式</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">计提天数</label>
        <div class="layui-input-inline">
          <select name="fundDay" class="layui-input">
            <option value=""></option>
            <option value="1">360</option>
            <option value="2">365</option>
            <option value="2">366</option>
          </select>
        </div>
      </div>
    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金托管银行</label>
        <div class="layui-input-inline">
          <input type="text" name="fundManager" lay-verify="required"
                 autocomplete="off" placeholder="基金托管银行" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">初始净值</label>
        <div class="layui-input-inline">
          <input type="text" name="firstFund" lay-verify="required"
                 autocomplete="off" placeholder="初始净值" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金规模</label>
        <div class="layui-input-inline">
          <input type="text" name="fundScale" lay-verify="required"
                 autocomplete="off" placeholder="基金规模" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">托管人费率</label>
        <div class="layui-input-inline">
          <input type="text" name="bankCost" lay-verify="required"
                 autocomplete="off" placeholder="托管人费率" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">管理人费率</label>
        <div class="layui-input-inline">
          <input type="text" name="custodianCost" lay-verify="required"
                 autocomplete="off" placeholder="管理人费率" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
          <input type="text" name="fundBeiZhu" lay-verify="required"
                 autocomplete="off" placeholder="备注" class="layui-input">
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>
</body>




</html>